<template>
  <div class="Mocktest">
    <div>请求数据：<span v-text="loginMsg" /></div>
    <el-button class="btn" type="primary" @click="loginBtn">
      获取mock数据
    </el-button>

    <el-button class="btn" type="primary" @click="testMock">
      本地组件测试mock数据
    </el-button>

    <div v-for="(item, index) in list" :key="index">
      <span v-text="item.id"></span>
    </div>
  </div>
</template>

<script>
import { LoginMock } from '@/api/user'

let Mock = require('mockjs')

export default {
  name: 'Mocktest',
  data() {
    return {
      loginMsg: '未登录',
      list: [],
    }
  },
  methods: {
    loginBtn() {
      const _this = this
      LoginMock().then((res) => {
        _this.loginMsg = res
      })
    },

    testMock() {
      let data = Mock.mock({
        'list|1-10': [
          {
            'id|+1': 1,
          },
        ],
      })
      this.list = data.list
      console.log(data)
    },
  },
}
</script>

<style lang="scss" scoped>
.Mocktest {
  width: 50%;
  margin: 50px auto;

  .btn {
    margin-top: 20px;
  }
}
</style>
